<template>
	<view class="index-container">
		<backgroundImg></backgroundImg>
		<view class="header-container">
			<view class="title-box">
				<view class="work-box" id="first-word" :class="{ 'pulse-animation': isAnimate }">
					<text>无</text>
				</view>
				<view class="work-box" id="second-word" :class="{ 'pulse-animation': isAnimate }">
					<text>忧</text>
				</view>
				<view class="work-box" id="third-word" :class="{ 'pulse-animation': isAnimate }">
					<text>挪</text>
				</view>
				<view class="work-box" id="fourth-word" :class="{ 'pulse-animation': isAnimate }">
					<text>车</text>
				</view>
			</view>
			<view class="image-box">
				<view class="picture-wrapper">
					<image 
						src="/static/1.jpg" 
						class="header-picture" 
						lazy-load
						mode="scaleToFill"
					/>
				</view>
			</view>
		</view>
		<view class="main-container">
			<view class="welcome-box">
				<text>梦无忧，欢迎您！</text>
			</view>
			<view class="button-container">
				<!-- 信息维护（带图标） -->
				<view class="button-box">
					<u-button 
						type="default"
						shape="radius"
						custom-style="width: 70%; height: 70%;"
					>
						<u-icon name="account" color="#2979ff" size="28" class="btn-icon"></u-icon>
						<text>信息维护</text>
					</u-button>
				</view>
				
				<!-- 诚信排行榜（带图标） -->
				<view class="button-box">
					<u-button 
						type="default"
						shape="radius"
						custom-style="width: 70%; height: 70%;"
					>
						<u-icon name="thumb-up" color="#2979ff" size="28" class="btn-icon"></u-icon>
						<text>诚信排行榜</text>
					</u-button>
				</view>
				
				<!-- 套餐升级（带图标） -->
				<view class="button-box">
					<u-button 
						@click="handlePackageUpgrade"
						:loading="loadingStates.packageUpgrade"
						type="default"
						shape="radius"
						custom-style="width: 70%; height: 70%;"
					>
						<u-icon name="bag" color="#2979ff" size="28" class="btn-icon"></u-icon>
						<text>套餐升级</text>
					</u-button>
				</view>
				
				<!-- 信息反馈（带图标） -->
				<view class="button-box">
					<u-button 
						type="default"
						shape="radius"
						custom-style="width: 70%; height: 70%;"
					>
						<u-icon name="info-circle" color="#2979ff" size="28" class="btn-icon"></u-icon>
						<text>信息反馈</text>
					</u-button>
				</view>
			</view>
			<view class="click-container">
				<!-- 扫码挪车（带图标） -->
				<view class="scan-code-box">
					<u-button 
						type="primary"
						color="#E91E63"
						shape="circle"
						custom-style="width: 50%; height: 100%;"
					>
						<u-icon name="scan" color="#fff" size="36" class="scan-icon"></u-icon>
						<text>扫码挪车</text>
					</u-button>
				</view>
				<view class="click-button-box">
					<view class="get-code">
						<text 
							@click="showCodeDialog"
							class="clickable-text"
						>获取个人\n临时二维码</text>
					</view>
					<view class="app-describe">
						<text 
							@click="handleAppDescription"
							class="clickable-text"
						>程序说明</text>
					</view>
				</view>
			</view>
		</view>
		<view class="bottom-container">
			<view class="times-box">
				<text>个人本月剩余次数：{{ noticeCount }}</text>
			</view>
			<view class="person-count-box">
				<text>已入驻车主数：{{ settledDriverCount }}</text>
			</view>
		</view>
		<temporaryCodeDialog
			:show="showDialog" 
			@close="showDialog = false" 
			:driverInfo="driverInfo" 
		/>
	</view>
</template>

<script>
import request from '@/utils/request.js'

export default {
	data() {
		return {
			showDialog: false,
			isAnimate: false,
			loadingStates: {
				infoMaintain: true,
				rankingList: false,
				packageUpgrade: false,
				feedback: false,
				scanCode: false
			},
			driverInfo: {
				name: "张三",
				carNumber: "粤A12345",
				settledTime: "2025-06-15",
				qrcodeUrl: "https://picsum.photos/200/200?random=1"
			},
			settledDriverCount: 1000000,
			noticeCount: 3
		}
	},
	onLoad() {
		// this.fetchInitialData()
		// this.startTitleAnimation()
	},
	methods: {
		// async fetchInitialData() {
		// 	try {
		// 		const [userRes, statsRes] = await Promise.all([
		// 			request.get('/api/user/info'),
		// 			request.get('/api/stats/driver')
		// 		])
		// 		this.driverInfo = { ...this.driverInfo, ...userRes.data }
		// 		this.settledDriverCount = statsRes.data.settledCount
		// 		this.noticeCount = statsRes.data.remainingTimes
		// 	} catch (err) {
		// 		console.error('初始化数据失败：', err)
		// 		uni.showToast({ title: '数据加载失败', icon: 'none' })
		// 	}
		// },
		// async handleInfoMaintain() {
		// 	this.loadingStates.infoMaintain = true
		// 	try {
		// 		const res = await request.get('/api/user/maintain')
		// 		uni.navigateTo({
		// 			url: '/pages/infoMaintain/infoMaintain?data=' + JSON.stringify(res.data)
		// 		})
		// 	} catch (err) {
		// 		console.error('信息维护请求失败：', err)
		// 		uni.showToast({ title: '操作失败', icon: 'none' })
		// 	} finally {
		// 		this.loadingStates.infoMaintain = false
		// 	}
		// },
		// async handleRankingList() {
		// 	this.loadingStates.rankingList = true
		// 	try {
		// 		const res = await request.get('/api/ranking/credit')
		// 		uni.navigateTo({
		// 			url: '/pages/rankingList/rankingList?list=' + JSON.stringify(res.data)
		// 		})
		// 	} catch (err) {
		// 		console.error('诚信排行榜请求失败：', err)
		// 		uni.showToast({ title: '操作失败', icon: 'none' })
		// 	} finally {
		// 		this.loadingStates.rankingList = false
		// 	}
		// },
		handlePackageUpgrade() {
			this.loadingStates.packageUpgrade = true
			try {
				uni.navigateTo({
					url: '/pages/packageUpgrade/packageUpgrade'
				})
			} catch (err) {
				console.error('套餐升级请求失败：', err)
				uni.showToast({ title: '操作失败', icon: 'none' })
			} finally {
				this.loadingStates.packageUpgrade = false
			}
		},
		// async handleFeedback() {
		// 	this.loadingStates.feedback = true
		// 	try {
		// 		uni.navigateTo({ url: '/pages/feedback/feedback' })
		// 	} catch (err) {
		// 		console.error('信息反馈跳转失败：', err)
		// 		uni.showToast({ title: '操作失败', icon: 'none' })
		// 	} finally {
		// 		this.loadingStates.feedback = false
		// 	}
		// },
		// async handleScanCode() {
		// 	this.loadingStates.scanCode = true
		// 	try {
		// 		uni.scanCode({
		// 			success: (res) => {
		// 				request.post('/api/scan/verify', { code: res.result })
		// 					.then(verifyRes => {
		// 						if (verifyRes.data.valid) {
		// 							uni.navigateTo({
		// 								url: '/pages/moveCar/moveCar?info=' + JSON.stringify(verifyRes.data)
		// 							})
		// 						} else {
		// 							uni.showToast({ title: '无效二维码', icon: 'none' })
		// 						}
		// 					})
		// 			},
		// 			fail: (err) => {
		// 				console.error('扫码失败：', err)
		// 				uni.showToast({ title: '扫码失败', icon: 'none' })
		// 			}
		// 		})
		// 	} catch (err) {
		// 		console.error('扫码功能异常：', err)
		// 		uni.showToast({ title: '操作失败', icon: 'none' })
		// 	} finally {
		// 		this.loadingStates.scanCode = false
		// 	}
		// },
		handleAppDescription() {
			uni.navigateTo({ url: '/pages/appDescription/appDescription' })
		},
		showCodeDialog() {
			this.showDialog = true
		},
		startTitleAnimation() {
			this.isAnimate = true
			setTimeout(() => {
				this.isAnimate = false
			}, 2000)
		}
	}
};
</script>

<style lang="scss">
	.index-container {
		position: absolute;
		width: 750rpx;
		height: 100vh;
		z-index: 1000;
	}

	.header-container {
		position: relative;
		width: 750rpx;
		height: 10vh;
		border-bottom: 1px solid #9CA8BD;
		display: flex;
		background-color: rgba(0, 0, 0, 0.1);

		.title-box {
			width: 70%;
			height: 100%;
			display: flex;
			align-items: center;

			.work-box {
				border-radius: 50%;
				height: 60%;
				aspect-ratio: 1/1;
				background-color: rgba(76, 175, 80, 0.3);
				margin-left: 10rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				transition: transform 0.3s ease;

				>text {
					font-family: 宋体;
					color: #333;
					font-size: 36rpx;
				}
			}
		}

		.image-box {
			width: 30%;
			height: 100%;
			align-items: center;
			display: flex;
			justify-content: flex-end;
			padding-right: 15rpx;

			.picture-wrapper {
				height: 70%;
				aspect-ratio: 1/1;

				.header-picture {
					height: 100%;
					width: 100%;
					border-radius: 50%;
					object-fit: cover;
					lazy-load: true;
				}
			}
		}
	}

	.pulse-animation {
		animation: pulse 0.5s ease-in-out;
	}
	@keyframes pulse {
		0% { transform: scale(1); }
		50% { transform: scale(1.1); }
		100% { transform: scale(1); }
	}

	#first-word { 
		position: relative;
		top: 15%; 
	}
	#second-word { 
		position: relative;
		top: -13%; 
	}
	#third-word { 
		position: relative;
		top: 10%; 
	}
	#fourth-word { 
		position: relative;
		top: -11%; 
	}

	.main-container {
		position: relative;
		width: 750rpx;
		height: 70vh;
		border-bottom: 1rpx solid #9CA8BD;

		.welcome-box {
			width: 100%;
			height: 15%;
			display: flex;
			align-items: center;
			justify-content: center;

			>text {
				font-size: 36rpx;
				color: #E91E63;
				font-weight: 500;
			}
		}

		.button-container {
			width: 100%;
			height: 50%;
			display: flex;
			flex-wrap: wrap;
			padding: 10rpx;

			.button-box {
				width: 50%;
				height: 50%;
				padding: 10rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: center;

				// u-button样式调整
				.u-button {
					display: flex;
					align-items: center;
					flex-direction: column; // 图标在上，文字在下
					justify-content: center;
					background-color: #f0f0f0;
					color: #333;
					font-size: 28rpx;

					&:active {
						background-color: #e0e0e0;
					}
				}

				.btn-icon {
					margin-right: 8rpx; // 图标与文字间距
				}
			}
		}

		.click-container {
			position: relative;
			width: 100%;
			height: 35%;

			.scan-code-box {
				width: 100%;
				height: 60%;
				display: flex;
				justify-content: center;
				align-items: center;

				.u-button {
					display: flex;
					flex-direction: column; // 图标在上，文字在下
					align-items: center;
					justify-content: center;
					background-color: #E91E63;
					color: white;
					font-size: 32rpx;

					&:active {
						background-color: #c2185b;
					}
				}

				.scan-icon {
					margin-bottom: 5rpx; // 扫码图标与文字间距
				}
			}

			.click-button-box {
				position: absolute;
				top: 60%;
				width: 100%;
				height: 40%;
				display: flex;
				align-items: center;

				.get-code {
					width: 40%;
					left: 10rpx;
					white-space: pre-line;
					text-align: center;
				}

				.app-describe {
					width: 40%;
					margin-left: 60%;
					display: flex;
					justify-content: flex-end;

					>text {
						padding-right: 10rpx;
					}
				}
			}
		}
	}

	.clickable-text {
		color: #2196F3;
		text-decoration: underline;
		cursor: pointer;
		white-space: pre-line;
		font-size: 28rpx;
	}

	.bottom-container {
		position: relative;
		width: 100%;
		height: 19.7vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: rgba(0, 0, 0, 0.1);

		.times-box {
			width: 50%;
			height: 40%;
			display: flex;
			justify-content: center;
			align-items: center;

			>text {
				font-family: 仿宋;
			}
		}

		.person-count-box {
			width: 50%;
			height: 40%;
			display: flex;
			justify-content: center;
			align-items: center;

			>text {
				font-family: 仿宋;
			}
		}
	}
</style>